/* 2017.12.22 LCP */
/*  一个一个标签试验后写出，有margin和没有margin都已分开 */
/* div、section没有margin和padding */
/* input默认有上下1像素padding,2像素边框！！！ */
body,h1,p,dl,dd{margin: 0;}
fieldset,ul,ol,figure{margin: 0;padding: 0;}
legend,input{padding: 0;}
fieldset,img{border: none;}
li{list-style: none;}
textarea,button,input,select {&:focus {outline: none;}}
table { border-collapse:collapse; border-spacing:0; }
a {color:#252525; text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {color:#ba2636;text-decoration:underline;}
a:active {color:#ba2636;}

/* html {
   font-size: 50px;
} */

html,body{
   width: 100%;
   height: 100%;
   color: #333333;
   box-sizing: border-box;
   overflow:auto;/* winphone8和android4+ */
   font-family: '黑体', sans-serif;
   -webkit-overflow-scrolling: touch; /* ios5+ */
   -webkit-tap-highlight-color: transparent;
   -webkit-font-smoothing: antialiased;
   /* iphone适配 */
   padding-top: constant(safe-area-inset-top);/*为导航栏+状态栏的高度 88px*/
   padding-left: constant(safe-area-inset-left);   /*如果未竖屏时为0*/
   padding-right: constant(safe-area-inset-right); /*如果未竖屏时为0*/
   padding-bottom: constant(safe-area-inset-bottom);/*为底下圆弧的高度 34px*/
}

/* flex布局 */

/* 使用注意：
flex下的子元素必须为块级元素，非块级元素在android2.3机器下flex失效;
flex下的子元素宽度和高度不能超过父元素，否则会导致子元素定位错误，例如水平垂直居中;
space-around 不在旧标准属性里 解决方案是使用space-between即justify 加给first-child last-child添加margin */


.flex {/* 定义布局为盒模型 */
   display: -webkit-box;/* OLD - iOS 6-, Safari 3.1-6 */
   display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
   display: -webkit-flex;/* NEW - Chrome */
   display: -ms-flexbox;/* TWEENER - IE 10 */
   display: flex;/* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.flex_1{/* 子元素占据剩余的空间 */
   -webkit-box-flex:1;/* OLD - iOS 6-, Safari 3.1-6 */
   -webkit-flex:1;/* NEW - Chrome */
   -ms-flex:1;/* TWEENER - IE 10 */
   flex:1;/* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.flex_v {/* 盒模型垂直布局 */
   -webkit-box-orient: vertical;/* OLD - iOS 6-, Safari 3.1-6 */
   -webkit-flex-direction: column;/* NEW - Chrome */
   -ms-flex-direction: column;/* TWEENER - IE 10 */
   flex-direction: column;/* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.flex_vcenter{/* 子元素垂直居中 */
   -webkit-box-align:center;/* OLD - iOS 6-, Safari 3.1-6 */
   -webkit-align-items:center;/* NEW - Chrome */
   -ms-flex-align:center;/* TWEENER - IE 10 */
   align-items:center;/* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.flex_center{/* 子元素水平居中 */
   -webkit-box-pack:center;/* OLD - iOS 6-, Safari 3.1-6 */
   -webkit-justify-content:center;/* NEW - Chrome */
   -moz-justify-content: center;
   -ms-flex-pack:center;/* TWEENER - IE 10 */
   justify-content:center;/* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.flex_between{/* 子元素两端对齐 */
   -webkit-box-pack:justify;/* OLD - iOS 6-, Safari 3.1-6 */
   -webkit-justify-content:space-between;/* NEW - Chrome */
   -ms-flex-pack:justify;/* TWEENER - IE 10 */
   justify-content:space-between;/* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.flex_wrap{
   -webkit-flex-wrap: wrap;
   -moz-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   -o-flex-wrap: wrap;
   flex-wrap:wrap;
}